﻿<%@ Page Language="C#" Inherits="PageBase" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>角色管理</title>
    <link href="../js/themes/default/easyui.css" rel="stylesheet" type="text/css" />
    <link href="../js/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="../css/default.css" rel="stylesheet" type="text/css" />

    <script src="../js/jquery-1.4.4.min.js" type="text/javascript"></script>

    <script src="../js/jquery.easyui.min.js" type="text/javascript"></script>

    <script src="../js/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>

    <script src="../js/common.js" type="text/javascript"></script>

    <script type="text/javascript">
        var me = {
            datagrid1: null,
            edit_form: null,
            edit_window: null,
            search_form: null,
            search_window: null,
            view_window: null,
            datagrid2: null,
            idFiled: 'RoleID',
            actionUrl: '../ashx/SysRole.ashx',
            menu_window: null,
            menu_window_tree: null
        };

        $(function() {
            pageInit();
            loadGrid();
        });

        function pageInit() {
            me.edit_window = $('#edit_window');
            me.edit_form = me.edit_window.find('#edit_form');
            me.search_window = $('#search_window');
            me.search_form = me.search_window.find('#search_form');
            me.view_window = me.search_window.find('#view_window');
            me.datagrid2 = $('#datagrid2');
            me.datagrid1 = $('#datagrid1');
            me.menu_window = $('#menu_window');
            me.menu_window_tree = me.menu_window.find('#menu_window_tree');

            $('#btn_edit_ok').linkbutton().click(function () {  SaveData(); });
            $('#btn_search_ok').linkbutton().click(function () { me.datagrid1.datagrid({ pageNumber: 1 }); });
            $('#btn_edit_cancel').linkbutton().click(function () { me.edit_window.window('close');});
            $('#btn_search_cancel').linkbutton().click(function () { me.search_window.window('close'); });
            $('#menu_window_ok').linkbutton().click(function () { SaveMenuFun(); });
            $('#menu_window_no').linkbutton().click(function () {  me.menu_window.window('close'); });
        }

        //加载列表
        function loadGrid() {
            me.datagrid1.datagrid({
                sortName: me.idFiled,
                idField: me.idFiled,
                url: me.actionUrl + '?Method=List',
                frozenColumns: [[

                  { field: 'opt', title: '操作', width: 170, align: 'center', formatter: function(value, rowData, rowIndex) {
                      strReturn = '';
                     
                      strReturn += '<a href="javascript:void(0)" class="l-btn-text icon-search1"  title="点击查看角色下的用户" onClick="ViewUser(' + rowData[me.idFiled] + ');" style="padding-left:20px;" >查看用户</a>';
                     
                      
                      strReturn += '<a href="javascript:void(0)" class="l-btn-text icon-search2"  title="点击设置角色的权限" onClick="SetMenuFun(' + rowData[me.idFiled] + ');" style="padding-left:20px;" >设置权限</a>';
                    
                      return strReturn;
                  }
              },
             
                {field: 'State', title: '状态', width: 60, sortable: true, align: 'center', formatter: function (value, rowData, rowIndex) {
                    var strReturn = '';
                    if (value == '1') {
                        strReturn = '<a href="javascript:void(0)" class="l-btn-text icon-ok" title="点击改变状态"  onClick="AddOrUpdate(\'updateState\',' + rowData[me.idFiled] + ',0);" style="padding-left:20px;height:20px;" ></a>';
                    } else {
                        strReturn = '<a href="javascript:void(0)" class="l-btn-text icon-useless"  title="点击改变状态" onClick="AddOrUpdate(\'updateState\',' + rowData[me.idFiled] + ',1);" style="padding-left:20px;height:20px;"></a>';
                    }
                    return strReturn;
                }
            }
            
				]],
                columns: [[
                  { field: 'Name', title: '显示名', width: 100, sortable: true, align: 'center' },
                  { field: 'AddTime', title: '添加时间', width: 140, sortable: true, align: 'center' }
                ]],
                toolbar: ['-'
               
                , { text: '新增', iconCls: 'icon-add', handler: function () { AddOrUpdate('add'); } }, '-'
              
                , { text: '修改', iconCls: 'icon-edit', handler: function () { AddOrUpdate('update'); } }, '-'
                
                , { text: '删除', iconCls: 'icon-remove', handler: function () { var ids = []; var rows = me.datagrid1.datagrid('getSelections'); if (rows.length == 0) { showError('请选择一条记录进行操作!'); } else { for (var i = 0; i < rows.length; i++) { ids.push(rows[i][me.idFiled]); } Delete(ids.join(',')); } } }, '-'
               
                 , { text: '查看', iconCls: 'icon-search', handler: function () { AddOrUpdate('view'); } }, '-'
             
                 , { text: '查找', iconCls: 'icon-search', handler: function () { me.search_window.window('open'); } }, '-'
               
                ],
                onBeforeLoad: function(param) {
                    me.search_form.find('input').each(function(index) {   param[this.name] = $(this).val();});
                }
            });

        }

        function AddOrUpdate(action) {

            switch (action) {
                case 'add':
                    $('#RoleID').val('0');
                    me.edit_form.find('#State').attr('checked', true);
                    me.edit_form.find('#Name,#Remark').val('');

                    me.edit_window.find('div[region="south"]').css('display', 'block');
                    me.edit_window.window('open');
                    break;
                case 'updateState':
                    $.ajax({
                        url: me.actionUrl + '?Method=UpdateState',
                        data: { RoleID: arguments[1], State: arguments[2] },
                        success: function(returnData) {
                            if (returnData) {
                                if (returnData.isOk == 1) {
                                    me.datagrid1.datagrid('reload');
                                } else {
                                    showError(returnData.message);
                                }
                            }
                        }
                    });
                    break;
                case 'update':
                    var selectedRows = me.datagrid1.datagrid('getSelections');
                    if (selectedRows.length > 0) {
                        $.ajax({
                            url: me.actionUrl + '?Method=AddOrUpdate&RoleID=' + selectedRows[0][me.idFiled],
                            success: function(data) {
                                me.edit_form.form('load', data);
                            }
                        });
                        me.edit_window.find('div[region="south"]').css('display', 'block');
                        me.edit_window.window('open');
                    } else {
                        showError('请选择一条记录进行操作!');
                        return;
                    }
                    break;
                case 'view':
                    var selectedRows = me.datagrid1.datagrid('getSelections');
                    if (selectedRows.length > 0) {
                        $.ajax({
                            url: me.actionUrl + '?Method=AddOrUpdate&RoleID=' + selectedRows[0][me.idFiled],
                            success: function (data) {
                                me.edit_form.form('load', data);
                            }
                        });
                        me.edit_window.find('div[region="south"]').css('display', 'none');
                        me.edit_window.window('open');
                    } else {
                        showError('请选择一条记录进行操作!');
                        return;
                    }
                    break;
            }
        }

        function SaveData() {
            if (me.edit_form.form('validate')) {
                $.ajax({
                    url: me.actionUrl + '?Method=Save',
                    data: me.edit_form.serialize(),
                    success: function(returnData) {
                        if (returnData) {
                            if (returnData.isOk == 1) {
                                showInfo(returnData.message);
                                me.datagrid1.datagrid('reload');
                            } else {
                                showError(returnData.message);
                            }
                        }
                    }
                });
            }
        }

        function Delete(ids) {
            $.messager.confirm('提示信息', '确认要删除选择项？【' + ids + '】', function(isClickedOk) {
                if (isClickedOk) {
                    $.ajax({
                        url: me.actionUrl,
                        data: { Method: 'Delete', ids: ids },
                        success: function(returnData) {
                            if (returnData) {
                                if (returnData.isOk == 1) {
                                    showInfo(returnData.message);
                                    me.datagrid1.datagrid('reload');
                                } else {
                                    showError(returnData.message);
                                }
                            }
                        }
                    });
                }
            })
        }

        function ViewUser(RoleID) {
            $('#role_window_datagrid').datagrid({
                sortName: "UserID",
                idField: "UserRoleID",
                url: '../ashx/SysUserRole.ashx?Method=ListByRole',
                queryParams: { RoleID: RoleID },
                columns: [[
                  { field: 'UserID', title: '用户ID', width: 60, sortable: true, align: 'center' },
                  { field: 'DisplayName', title: '用户名', width: 100, sortable: true, align: 'center' },
                  { field: 'LoginName', title: '登录名', width: 100, sortable: true, align: 'center' },
                  { field: 'DeptName', title: '部门', width: 100, sortable: true, align: 'center' }
                ]]
            });
            $('#role_window').window({ title: "角色下用户" }).window('open');

        }
        function SetMenuFun(RoleID) {
            me.menu_window_tree.tree({
                url: '../ashx/SysMenuFun.ashx?method=Tree&state=1&roleid='+RoleID,
                data: { roleid: RoleID },
                checkbox: true,
                onlyLeafCheck: false,
                checkboxFn: function(node) {
                    return true;
                },
                onSelect: function(node) {
                    if (node.checked) {
                        $(this).tree('uncheck', node.target);
                    } else {
                        $(this).tree('check', node.target);
                    }
                }
            });
            me.menu_window.data('RoleID', RoleID);
            me.menu_window.window({ title: "设置权限" }).window('open');
        }
        function SaveMenuFun() {
            var selectedNodes = me.menu_window_tree.tree('getChecked');
            var selectedMenuFunID = [];
            $.each(selectedNodes, function(index, node) {
                if (node.attributes.IsMenu != '1') {
                    selectedMenuFunID.push(node.id.split('_')[2]);
                }
            });
            var roleid = me.menu_window.data('RoleID');
            $.ajax({
                url: '../ashx/SysRole.ashx?Method=SaveRoleMenuFun',
                data: { roleid: roleid, menufunids: selectedMenuFunID.join(',') },
                success: function(returnData) {
                    if (returnData) {
                        if (returnData.isOk == 1) {
                            showInfo(returnData.message);
                            me.datagrid1.datagrid('reload');
                        } else {
                            showError(returnData.message);
                        }
                    }
                }
            });
        }
    </script>

</head>
<body class="easyui-layout">
    <noscript>
        <div style="position: absolute; z-index: 100000; height: 2046px; top: 0px; left: 0px; width: 100%; text-align: center;">
            <img src="../images/noscript.gif" alt='抱歉，请开启脚本支持！' />
        </div>
    </noscript>
    <div title="数据列表" region="center" border="false">
        <table id="datagrid1">
        </table>
    </div>
    <div id="edit_window" class="easyui-window" closed="true" title="数据维护窗口" style="width: 400px; height: 260px; padding: 5px;">
        <div class="easyui-layout" fit="true">
            <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
                <form id="edit_form" name="edit_form" method="post">
                <div title="隐藏参数">
                    <input type="hidden" id="DeptID" name="DeptID" value="0" />
                    <input type="hidden" id="RoleID" name="RoleID" value="0" />
                </div>
                <table cellpadding="3">
                    <tr>
                        <td>
                            角色名：
                        </td>
                        <td>
                            <input id="Name" name="Name" type="text" class="easyui-validatebox" required="true" maxlength="30" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            状态：
                        </td>
                        <td align="left">
                            <input type="checkbox" id="State" name="State" value="1" checked="checked" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            备注：
                        </td>
                        <td>
                            <textarea id="Remark" name="Remark" cols="40" class="easyui-validatebox" validtype="length[0,200]" rows="3" ></textarea>
                        </td>
                    </tr>
                </table>
                </form>
            </div>
            <div region="south" border="false" style="text-align: center; height: 30px; line-height: 30px;">
                <a id="btn_edit_ok" icon="icon-save" href="javascript:void(0)">确定</a> <a id="btn_edit_cancel" icon="icon-cancel" href="javascript:void(0)">关闭</a>
            </div>
        </div>
    </div>
    <div id="search_window" class="easyui-window" closed="true" title="查询窗口" style="width: 350px; height: 200px; padding: 5px">
        <div class="easyui-layout" fit="true">
            <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
                <form id="search_form" method="post">
                <table>
                    <tr>
                        <td>
                            角色名：
                        </td>
                        <td>
                            <input name="Name" id="Name" style="width: 150px;" />
                        </td>
                    </tr>
                </table>
                </form>
            </div>
            <div region="south" border="false" style="text-align: center; height: 30px; line-height: 30px;">
                <a href="javascript:void(0)" id="btn_search_ok" icon="icon-ok">确定</a> <a href="javascript:void(0)" id="btn_search_cancel" icon="icon-cancel">关闭</a>
            </div>
        </div>
        <div id="role_window" class="easyui-window" closed="true" title="查看用户窗口" style="width: 500px; height: 400px;">
            <table id="role_window_datagrid">
            </table>
        </div>
        <div id="menu_window" class="easyui-window" closed="true" title="设置权限窗口" style="width: 300px; height: 450px;">
            <div class="easyui-layout" fit="true">
                <div region="center" border="false" style="padding: 10px; background: #fff; border: 1px solid #ccc;">
                    <ul id="menu_window_tree">
                    </ul>
                </div>
                <div style="text-align: center; padding: 5px; height: 40px;" border="false" region="south" split="false">
                    <a href="javascript:void(0)" id="menu_window_ok" icon="icon-ok">确定</a> <a href="javascript:void(0)" id="menu_window_no" icon="icon-cancel">关闭</a>
                </div>
            </div>
        </div>
</body>
</html>
